import React, { useState, useCallback, useMemo } from 'react'
import WNavBar from '@components/global/navBar'
// @ts-ignore
import Styles from './index.scss'
import { List, InputItem, Button, Toast } from 'antd-mobile';
import { Api } from '@ajax/api'
import Wimage from '@components/global/image'
import { useDispatch } from 'react-redux'
import { loginAction } from '@store/auth/actions'
import Router from 'next/router'
import withAuth from '@utils/auth'

interface PopInterface {
  title: string
}


const Login = (props: PopInterface) => {

  // 账号
  const [user, setUser] = useState('')
  // 密码
  const [pass, setPass] = useState('')
  // 验证码
  const [code, setCode] = useState('')
  // 时间戳
  const [timeStamp, setTimeStamp] = useState(0)

  const dispatch = useDispatch()

  // 登录按钮点击
  const loginClick = useCallback(async () => {
    if (check()) {
      await dispatch(loginAction(user, pass, code))
      Toast.success('登陆成功')
      Router.replace('/set')
    }
  }, [user, pass, code])

  // 验证码点击
  const codeClick = useCallback(() => {
    setTimeStamp(new Date().getTime())
  }, [])

  // 验证码链接
  const codeUrl = useMemo(() => {
    return `${Api.user.verificationCode}?t=${timeStamp}`
  }, [timeStamp])

  // 数据校验
  const check = useCallback(() => {
    if (!user) {
      Toast.fail('请输入账号')
      return
    }
    if (!/^[0-9A-Za-z]{4,20}$/.test(user)) {
      Toast.fail('账号必须是4-20位(数字、字符)')
      return
    }
    if (!pass) {
      Toast.fail('请输入密码')
      return
    }
    if (!/^[0-9A-Za-z]{6,20}$/.test(pass)) {
      Toast.fail('密码必须是6-20位(数字、字符)')
      return
    }
    if (!code) {
      Toast.fail('请输入验证码')
      return
    }
    if (!/^[0-9A-Za-z]{4}$/.test(code)) {
      Toast.fail('验证码必须是4位(数字、字符)')
      return
    }
    return true
  }, [user, pass, code])

  return (
    <WNavBar title={props.title}>
      <>
        <List>
          <InputItem
            type="text"
            clear
            maxLength={20}
            placeholder="请输入账号"
            onChange={(e) => setUser(e)}
            value={user}
          >账号</InputItem>
          <InputItem
            type="password"
            clear
            maxLength={20}
            placeholder="请输入密码"
            onChange={(e) => setPass(e)}
            value={pass}
          >密码</InputItem>
          <InputItem
            type="text"
            clear
            maxLength={4}
            placeholder="请输入验证码"
            onChange={(e) => setCode(e)}
            value={code}
            extra={<Wimage
              lazyLoad={false}
              resize={false}
              onClick={codeClick}
              url={codeUrl}
              width={96}
              height={44} />}
          >验证码</InputItem>
        </List>
        <div className={`${Styles['bottom-box']} w-flex-center`}>
          <Button className={Styles['login-btn']} type="primary" onClick={loginClick}>登录</Button>
        </div>
      </>
    </WNavBar>
  )
}

Login.getInitialProps = async () => {
  return {
    title: '登录',
  }
}

export default withAuth(Login, false)
